.user-nav-list {
  width: 158px;
  border: 1px solid #202020;
  background-color: #2b2b2b;
  box-shadow: 0 8px 24px 0 rgb(0 0 0 / 50%);
  border-radius: 4px;

  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 34px;
    padding-left: 24px;
    box-sizing: border-box;

    &:hover {
      background-color: #353535;

      .link {
        color: #fff;
      }
    }

    .icon {
      width: 18px;
      height: 18px;
      background: url('@/assets/image/user/toplist.png') no-repeat;
    }

    .link {
      font-size: 12px;
      color: #ccc;
      cursor: pointer;
    }

    .homepage {
      background-position: 0 -80px;
    }

    .message {
      background-position: -20px -120px;
    }

    .grade {
      background-position: 0 -100px;
    }

    .member {
      background-position: 0 -221px;
    }

    .setting {
      background-position: 0 -140px;
    }

    .real-name {
      background-position: -20px -142px;
    }

    .logout {
      background-position: 0 -200px;
    }

    .msg-count {
      padding-inline: 4px;
      margin-left: -8px;
      border: 1px solid #242424;
      background-color: #c20c0c;
      font-size: 12px;
      color: #fff;
      white-space: nowrap;
      border-radius: 20px;
    }
  }
}